<div class="border-bottom">
  <h2 class="pt-3 pb-2"><%= t ".title" %></h2>
</div>

<div class="card my-3" data-live-poll-region="processes">
  <div class="list-group list-group-flush" role="table">
    <header class="list-group-item bg-body-tertiary">
      <div class="row small text-muted text-uppercase align-items-center">
        <div class="col"><%= t ".process" %></div>
        <div class="col"><%= t ".schedulers" %></div>
        <div class="col-2 d-flex gap-2"><%= t ".cron_enabled" %></div>
        <div class="col-2 d-flex gap-2">
          <span><%= t ".started" %></span>
        </div>
        <div class="col-2 d-flex gap-2">
          <span><%= t ".updated" %></span>
        </div>
        <div class="col-auto">
          <%= tag.button type: "button", class: "btn btn-sm text-muted ms-auto", role: "button",
                         data: { bs_toggle: "collapse", bs_target: ".process-state" },
                         aria: { expanded: false, controls: @processes.map { |process| "##{dom_id(process, 'state')}" }.join(" ") } do %>
              <%= render_icon "info" %>
              <span class="visually-hidden"><%= t "good_job.actions.inspect" %></span>
          <% end %>
        </div>
      </div>
    </header>
    <% @processes.each do |process| %>
      <div id="<%= dom_id(process) %>" class="<%= dom_class(process) %> list-group-item py-3" role="row">
        <div class="row align-items-center">
          <div class="col">
            <%= tag.code title: process.state['proctitle'], class: "font-monospace" do %>
              <span class="text-muted opacity-50">$</span>
              <%= process.basename %>
            <% end %>
            <div>
              <span class="text-muted small">PID</span>
              <span class="badge rounded-pill bg-body-secondary text-secondary"><%= process.state["pid"] %></span>
              <span class="text-muted small">@</span>
              <span class="badge rounded-pill bg-body-secondary text-secondary"><%= process.state["hostname"] %></span>
              <span class="badge rounded-pill bg-body-secondary text-secondary"><%= (process.state["memory"] / 1024).to_i %> MB</span>
            </div>
          </div>
          <div class="col mw-100">
            <% process.schedulers.each do |scheduler_data| %>
              <pre class="mb-0" title="<%= scheduler_data %>">queues=<%= scheduler_data["queues"] %> max_threads=<%= scheduler_data["max_threads"] %></pre>
            <% end %>
          </div>
          <div class="col-2 small"><%= t(ActiveModel::Type::Boolean.new.cast(process.state["cron_enabled"]), scope: "good_job.shared.boolean") %></div>
          <div class="col-2 small"><%= relative_time(process.created_at) %></div>
          <div class="col-2 small"><%= relative_time(process.updated_at) %></div>
          <div class="col-auto">
            <%= tag.button type: "button", class: "btn btn-sm text-muted ms-auto", role: "button",
                           title: t("good_job.actions.inspect"),
                           data: { bs_toggle: "collapse", bs_target: "##{dom_id(process, 'state')}" },
                           aria: { expanded: false, controls: dom_id(process, "state") } do %>
              <%= render_icon "info" %>
              <span class="visually-hidden"><%= t "good_job.actions.inspect" %></span>
            <% end %>
          </div>
        </div>
      </div>
      <%= tag.div id: dom_id(process, "state"), class: "process-state list-group-item collapse small bg-dark text-light" do %>
        <%= tag.pre JSON.pretty_generate(process.state) %>
      <% end %>
    <% end %>
    <% if @processes.empty? %>
      <div class="list-group-item py-4 text-center text-muted">
        <%= t ".no_good_job_processes_found" %>
      </div>
    <% end %>
  </div>
</div>
